﻿﻿<!DOCTYPE HTML>
<html>
<head>
<title>Gaming Blog Bootstarp Website Template | Games</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
</head>
<style>
            h2 {
            	margin-bottom: 20px;
            }
            
			
            .box {
            	width: 80%;
            	max-width: 600px;
            	margin-bottom: 30px;
            	display: flex;
            	justify-content: center;
            	align-items: center;
            	font-size: 25px;
            	line-height: 40px;
            	background-color: #fff;
            	padding: 10px;
            	border-radius: 5px;
            	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            
            .qs {
            	margin: 0 20px;
            	color: red;
            }
            
            .btns {
            	display: flex;
            	gap: 10px;
            }
            
            .btns button {
            	width: 120px;
            	height: 35px;
            	border: none;
            	border-radius: 5px;
            	background-color: #007bff;
            	color: white;
            	cursor: pointer;
            	transition: background-color 0.3s;
            }
            
            .btns button:hover {
            	background-color: #0056b3;
            }
            
            .content {
            	margin-top: 20px;
            	font-size: 18px;
            	color: #333;
            }
			.chou{
				font-family: Arial, sans-serif;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 30vh;
				margin: 0;
			}
        </style>
<body>
<!-- Header Starts Here -->
<div class="header">
	<div class="container">
		<div class="logo">
			<a href="index.html"><img src="images/logo.png" alt=""></a>
		</div>
		<span class="menu"></span>
		<div class="navigation">
			<ul class="navig cl-effect-3" >
				<li><a href="index.html">主页</a></li>
				<li><a href="games.html">抽奖</a></li>
				<li><a href="blog.html">鸡蛋动画</a></li>
				<li><a href="features.html">爱心照片墙</a></li>
			</ul>
			<div class="search-bar">
					<input type="text" placeholder="搜索" required="" />
					<input type="submit" value="" />
			</div>
			<script>
				$( "span.menu" ).click(function() {
				  $( ".navigation" ).slideToggle( "slow", function() {
				    // Animation complete.
				  });
				});
			</script>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- Header Ends Here -->	
<!-- Games Page Starts here -->
<div class="what-new">
	<br /><br /><br />
	<div class="chou">
		<h3>抽奖活动</h3>
		<div class="blog-news-grid">
			<div class="clearfix"></div>
		</div>
		<h2>随机点名</h2>
		<div class="box">
			<span>名字是：</span>
			<div class="qs" id="nameDisplay">这里显示姓名</div>
		</div>
		<div class="btns">
			<button class="start">开始</button>
			<button class="end">结束</button>
		</div>
		<div id="resultDisplay"></div>
		<div class="content">
		
		</div>
	</div>
</div>
<div class="games">
	<div class="container">
		<div class="page-path">
			<ul class="path-list">
				<li><a href="index.html">主页</a></li>&nbsp;&nbsp;/&nbsp;&nbsp;
				<li class="act">游戏</li>
			</ul>
			<p><a href="index.html">回到主页</a></p>
			<div class="clearfix"></div>
		</div>
		<h3 class="page-header">
			游戏列表
		</h3>
		<div class="main">
		        <div class="view view-first">
		            <img src="beng/2.png" style="width:300px;height: 200px;" />
		            <div class="mask">
		                <h2>崩坏：星穹铁道</h2>
		                <p>一种美妙的宁静占据了我的整个灵魂，就像这些春天的甜美早晨，我全心全意地享受着.</p>
		                <a href="single.html" class="info">开始游玩</a>
		            </div>
		        </div>  
		        <div class="view view-first">
		            <img src="beng/3.png" style="width:300px;height: 200px;" />
		            <div class="mask">
		                <h2>崩坏：星穹铁道</h2>
		                <p>一种美妙的宁静占据了我的整个灵魂，就像这些春天的甜美早晨，我全心全意地享受着.</p>
		                <a href="single.html" class="info">开始游玩</a>
		            </div>
		        </div>  
		        <div class="view view-first">
		            <img src="beng/23.png" style="width:300px;height: 200px;" />
		            <div class="mask">
		                <h2>崩坏：星穹铁道</h2>
		                <p>一种美妙的宁静占据了我的整个灵魂，就像这些春天的甜美早晨，我全心全意地享受着.</p>
		                <a href="single.html" class="info">开始游玩</a>
		            </div>
		        </div>  
		        <div class="view view-first">
		            <img src="beng/89.jpg" style="width:300px;height: 200px;" />
		            <div class="mask">
		                <h2>崩坏：星穹铁道</h2>
		                <p>一种美妙的宁静占据了我的整个灵魂，就像这些春天的甜美早晨，我全心全意地享受着.</p>
		                <a href="single.html" class="info">开始游玩</a>
		            </div>
		        </div> 
		        <div class="view view-first">
		            <img src="images/5.jpg" />
		            <div class="mask">
		                <h2>崩坏：星穹铁道</h2>
		                <p>一种美妙的宁静占据了我的整个灵魂，就像这些春天的甜美早晨，我全心全意地享受着.</p>
		                <a href="single.html" class="info">开始游玩</a>
		            </div>
		        </div>  
		        <div class="view view-first">
		            <img src="images/6.jpg" />
		            <div class="mask">
		                <h2>崩坏：星穹铁道</h2>
		                <p>一种美妙的宁静占据了我的整个灵魂，就像这些春天的甜美早晨，我全心全意地享受着.</p>
		                <a href="single.html" class="info">开始游玩</a>
		            </div>
		        </div>  
		        <div class="view view-first">
		            <img src="images/2.jpg" />
		            <div class="mask">
		                <h2>崩坏：星穹铁道</h2>
		                <p>一种美妙的宁静占据了我的整个灵魂，就像这些春天的甜美早晨，我全心全意地享受着.</p>
		                <a href="single.html" class="info">开始游玩</a>
		            </div>
		        </div> 
		        <div class="view view-first">
		            <img src="images/1.jpg" />
		            <div class="mask">
		                <h2>崩坏：星穹铁道</h2>
		                <p>一种美妙的宁静占据了我的整个灵魂，就像这些春天的甜美早晨，我全心全意地享受着.</p>
		                <a href="single.html" class="info">开始游玩</a>
		            </div>
		        </div>  
		        <div class="view view-first">
		            <img src="images/4.jpg" />
		            <div class="mask">
		                <h2>崩坏：星穹铁道</h2>
		                <p>一种美妙的宁静占据了我的整个灵魂，就像这些春天的甜美早晨，我全心全意地享受着.</p>
		                <a href="single.html" class="info">开始游玩</a>
		            </div>
		        </div> 
		  </div>
          <div class="side-bar">
          	<h4>游戏</h4>
          	<ul class="game-list">
          		<li><a href="games.html">射击</a></li>
          		<li><a href="games.html">操作</a></li>
          		<li><a href="games.html">汽车</a></li>
          		<li><a href="games.html">摔跤</a></li>
          		<li><a href="games.html">自行车</a></li>
          		<li><a href="games.html">赛车</a></li>
				<li><a href="games.html">赛车1</a></li>
				<li><a href="games.html">赛车2</a></li>
          	</ul>
			<h4>游戏</h4>
			<ul class="game-list">
				<li><a href="games.html">射击</a></li>
				<li><a href="games.html">操作</a></li>
				<li><a href="games.html">汽车</a></li>
				<li><a href="games.html">摔跤</a></li>
				<li><a href="games.html">自行车</a></li>
				<li><a href="games.html">赛车</a></li>
				<li><a href="games.html">赛车</a></li>
				<li><a href="games.html">赛车1</a></li>
				<li><a href="games.html">赛车2</a></li>
			</ul>
          </div>
          <div class="clearfix"></div>
	</div>
</div>

<!-- Games Page Ends here -->
<!-- What New Part starts Here -->

<!-- What New Part Endss Here -->
<!-- Footer Starts Here -->
<div class="footer">
	<div class="container">
		<ul class="social">
			<li><i class="fa"></i></li>
			<li><i class="fb"></i></li>
			<li><i class="fc"></i></li>
		</ul>
		
	</div>
	
</div>
<!-- Footer Ends Here -->
</body>
<script>
            // 数据数组
            const arr = ['一等奖', '二等奖', '三等奖', '特等奖', '谢谢参与','纯人机']
            //获取开始事件
            let start = document.querySelector(".start")
            let qs = document.querySelector(".qs")
            let timeid = 0
            let i = 0
            let data = 0
            /*获取随机值*/
            start.addEventListener('click', function() {
            	timeid = setInterval(function() {
            		data = parseInt(Math.random() * arr.length)
            		qs.innerHTML = arr[data]
            	}, 50)
            	i++
            	/*剩余最后一个时直接显示*/
            	if (arr.length === 1) {
            		start.disabled = end.disabled = true
            	}
            })
            
            /*结束开关*/
            let end = document.querySelector(".end")
            end.addEventListener('click', function() {
            	console.log(123);
                clearInterval(timeid)
                let content = document.querySelector(".content")
                content.innerHTML = `第${i}个是${arr[data]}`
                /*结束后删除选中内容*/
                // arr.splice(data, 1)
                console.log(arr)
            })
        </script>
</html>